<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
    <style>
      .category-container {
        display: flex;
        overflow: hidden;
        overflow-x: auto;
      }
      .product-wrapper {
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        
      }
      .product-wrapper :first-child {
        padding-left: 10px;
      }
      .product-wrapper :last-child {
        padding-right: 10px;
      }
      .product-section {
        width: 45%;
      }
      .product-section span:first-child {
        font-size: 5.333333vw;
        font-weight: bold;
      }
      .product-section span:nth-child(2) {
        font-size: 4.266667vw;
        color: grey;
      }
      .product-section .product-item {
        width: 100%;
        display: flex;
        overflow: hidden;
        overflow-x: auto;

      }
      .product-section .product-item .product-item2 {
        width: 50%;
        justify-content: center;
        align-items: center;
      }
      .product-section .product-item:first-child {
        display: flex;
        overflow: hidden;
        overflow-x: auto;
      }
    
     
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 顶部搜索 -->
      <header>
        <input type="text" placeholder="搜索..." />
      </header>
      <div class="search">
        <img
          src="https://img0.baidu.com/it/u=3386509736,2230695850&fm=253&fmt=auto&app=138&f=JPG?w=1200&h=360"
          alt=""
        />
      </div>
      <!-- 内容 -->
      <div class="content">
        <div class="category-container">
          <div class="category-item">
            <img src="./img/ic_public_cart_active.png" alt="" />
            <p>气质女装</p>
          </div>
          <div class="category-item">
            <img src="./img/ic_public_cart_active.png" alt="" />
            <p>气质女装</p>
          </div>
          <div class="category-item">
            <img src="./img/ic_public_cart_active.png" alt="" />
            <p>气质女装</p>
          </div>
          <div class="category-item">
            <img src="./img/ic_public_cart_active.png" />
            <p>气质女装</p>
          </div>
          <div class="category-item">
            <img src="./img/ic_public_cart_active.png" alt="" />
            <p>气质女装</p>
          </div>
          <div class="category-item">
            <img src="./img/ic_public_cart_active.png" alt="" />
            <p>气质女装</p>
          </div>
        </div>
        <div class="product-wrapper">
          <div class="product-section">
            <span>爆款推荐</span> <span>最受欢迎</span>
            <div class="product-item">
              <div class="product-item2">
                <img src="./img/ic_public_cart_active.png" alt="Product 1" />
                <div class="product-price">¥423</div>
                <div class="product-discount">立减90</div>
              </div>
              <div class="product-item2">
                <img src="./img/ic_public_cart_active.png" alt="Product 2" />
                <div class="product-price">¥229</div>
                <div class="product-discount">立减90</div>
              </div>
              <div class="product-item2">
                <img src="./img/ic_public_cart_active.png" alt="Product 2" />
                <div class="product-price">¥229</div>
                <div class="product-discount">立减90</div>
              </div>
              <div class="product-item2">
                <img src="./img/ic_public_cart_active.png" alt="Product 2" />
                <div class="product-price">¥229</div>
                <div class="product-discount">立减90</div>
              </div>
              <div class="product-item2">
                <img src="./img/ic_public_cart_active.png" alt="Product 2" />
                <div class="product-price">¥229</div>
                <div class="product-discount">立减90</div>
              </div>
            </div>
          </div>
          <div class="product-section">
            <span>一站买全</span> <span>贴心优选</span>
            <div class="product-item">
              <div class="product-item2">
                <img src="./img/ic_public_cart_active.png" alt="Product 1" />
                <div class="product-price">¥423</div>
                <div class="product-discount">立减90</div>
              </div>
              <div class="product-item2">
                <img src="./img/ic_public_cart_active.png" alt="Product 2" />
                <div class="product-price">¥229</div>
                <div class="product-discount">立减90</div>
              </div>
              <div class="product-item2">
                <img src="./img/ic_public_cart_active.png" alt="Product 2" />
                <div class="product-price">¥229</div>
                <div class="product-discount">立减90</div>
              </div>
              <div class="product-item2">
                <img src="./img/ic_public_cart_active.png" alt="Product 2" />
                <div class="product-price">¥229</div>
                <div class="product-discount">立减90</div>
              </div>
              <div class="product-item2">
                <img src="./img/ic_public_cart_active.png" alt="Product 2" />
                <div class="product-price">¥229</div>
                <div class="product-discount">立减90</div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="fresh-goods-section">
            <h2>新鲜好物 <span>生活加分项</span></h2>
            <div class="product-list">
                <div class="product-item">
                    <img src="earrings.jpg" alt="Earrings">
                    <p class="price">¥289</p>
                </div>
                <div class="product-item">
                    <img src="t-shirt.jpg" alt="T-shirt">
                    <p class="price">¥239</p>
                </div>
                <div class="product-item">
                    <img src="cap.jpg" alt="Cap">
                    <p class="price">¥149</p>
                </div>
                <div class="product-item">
                    <img src="bag.jpg" alt="Bag">
                    <p class="price">¥139</p>
                </div>
            </div> -->
      </div>

      <!-- 底部tabBar -->
      <ul class="footer">
        <li class="bottom_btn">
          <img src="./img/ic_public_home_active.png" alt="" />
          <a href="">首页</a>
        </li>
        <li class="bottom_btn">
          <img src="./img/ic_public_pro_normal.png" alt="" />
          <a href="">分类</a>
        </li>
        <li class="bottom_btn">
          <img src="./img/ic_public_cart_normal.png" alt="" />
          <a href="">购物袋</a>
        </li>
        <li class="bottom_btn">
          <img src="./img/ic_public_my_normal.png" alt="" />
          <a href="">我的</a>
        </li>
      </ul>
    </div>
  </body>
</html>
